import React from 'react';
import styles from './index.less';
import { CodeSandboxOutlined } from '@ant-design/icons';
import { connect, Dispatch } from 'umi';
import anothorStyles from '../index.less';
import kls from 'classnames';
import { WORKING_TAB } from '@/models/app';

const LeftNavBar = ({ dispatch, curProjName, curWorkingTab }) => {
  function toggleToolBar(item, curWorkingTab) {
    console.log('toggleToolBar',item, curWorkingTab)
    if (item === curWorkingTab) {
      return;
    }
    let isGlobalProcessRender = item === WORKING_TAB[1];
    dispatch({
      type: 'app/updateState',
      payload: {
        curWorkingTab: item,
        // isGlobalProcessRender,
      },
    });
    if (isGlobalProcessRender) {
      dispatch({
        type: 'maptoolbar/updataActiveToolbar',
        payload: 'bimtree',
      });
    } else {
      dispatch({
        type: 'maptoolbar/updataActiveToolbar',
        payload: '',
      });
    }
  }

  const cfg = [
    { title: '管理首页', value: WORKING_TAB[5] },
    { title: '质量安全', value: WORKING_TAB[2] },
    { title: '监控集成', value: WORKING_TAB[0] },
    {
      title: '进度分析',
      value: WORKING_TAB[1],
      // cb: toggleGlobalRender,
    },
    { title: '城市规划', value: WORKING_TAB[3] },
    { title: '临建设计', value: WORKING_TAB[4] },
  ];

  return (
    <div className={kls(styles.leftNavBar)}>
      <div
        className={kls(styles.breadcrumbs)}
        onClick={() => {
          window.location.href = './';
        }}
      >
        {curProjName}
      </div>

      <div className={kls(styles.nav)}>
        {cfg.map(({ title, value, cb }) => {
          return (
            <div
              key={title}
              className={kls(styles.item, {
                [styles.itemActive]: value == curWorkingTab,
              })}
              onClick={() => {
                cb ? cb(value, curWorkingTab) : toggleToolBar(value, curWorkingTab);
              }}
            >
              {title}
            </div>
          );
        })}
      </div>
    </div>
  );
};

// export default LeftNavBar;

export default connect(({ bimmodel, app }) => {
  return {
    isGlobalProcessRender: app.isGlobalProcessRender,
    compareState: bimmodel.compareState,
    curWorkingTab: app.curWorkingTab,
    curProjName: app.curProjName,
  };
})(LeftNavBar);
